
<template>
  <div id="app">
    <header>
      <i class="el-icon-arrow-left" @click="$router.push({ path: '/j' })"></i>
      <span>购物车</span>
      <div class="ddd">
        <i class="el-icon-more"></i>
        <i class="el-icon-remove-outline"></i>
      </div>
    </header>
    <!-- <div class="l">
      <span>编辑购物车</span>
    </div> -->
    <main>
      <div class="box2" v-for="(item, i) in shopList">
        <van-checkbox v-model="checkall" class="p"></van-checkbox>
        <div class="tp">
          <img @click="$router.push({ path: '/fashion' })" :src="item.productImg" width="90" height="90" alt="">
        </div>
        <div class="tp2">
          <p>{{ item.productName }}</p>
          <div class="box3">
            <span class="v">¥{{ item.price }}</span>
            <div class="temp">
              <el-button size="mini" @click="item.count -= 1" :disabled="item.count <= 0">-</el-button>
              <span class="const">{{ item.count }}</span>
              <el-button size="mini" @click="item.count += 1">+</el-button>
              <span class="o " @click="del(item)">删除</span>
            </div>

          </div>
        </div>
      </div>
    </main>
    <van-submit-bar button-text="提交订单" @submit="onSubmit" class="m">
      <van-checkbox v-model="checkall" class="z">全选</van-checkbox>
      <div class="n">总价:</div>
      <span class="m"> {{ totalPrice }}</span>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from 'vue';
import { SubmitBar, Checkbox, CheckboxGroup } from 'vant';
// Vue.use(Checked);
import { RadioGroup, Radio } from 'vant';
import axios from "axios";

Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Checkbox);
Vue.use(CheckboxGroup)
Vue.use(SubmitBar);

// import {orderList} from '@/api/orderList'
export default {
  data() {
    return {
      num: 1,
      checkall: false,
      radio: '1',
      shopList: [],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    onSubmit() {
      this.$router.push({ path: '/payments' })
    },
    changeAll() {
      this.list.forEach(item => {
        item.check = this.checkall
      })
    },
    // async getOrder(){
    //   let res = await orderList()
    //   console.log(res,'order');
    // }
    shopsList() {
      axios({
        url: "http://192.168.20.106:8000/api/cart",
        params: {
          userId: 7
        },
        method: "get",
      }).then((res) => {
        // console.log(res);
        this.shopList = res.data.data
      });
    },
    delList(){
      
    },
    del(item) {
      console.log(item);
      axios({
        url: "http://192.168.20.106:8000/api/cart/delete",
        data: {
          productId: item.productId,
          userId:item.userId
        },
        method: "post",
      }).then((res) => {
        console.log(res);
        // this.shopList = res.data.data
        this.shopsList()
      });
    }
  },
  computed: {
    totalPrice() {
      return this.shopList.reduce((total, next) => total + next.price * next.count, 0);
    }
  },
  mounted() {
    // this.getOrder()
    this.shopsList()
  }
};


</script>

<style scoped>
header {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
}

.o {
  display: block;
  width: 30px;
  position: absolute;
  top: 40px;
  right: 5px;
}

.const {
  padding: 10px;
}

.l {
  position: absolute;
  right: 10px;
}

.n {
  margin-right: 5px;
  width: 40px;
  text-align: center;
}

.m {
  margin-right: 20px;
}

.temp {
  width: 130px;
  height: 50px;
  position: absolute;
  right: 5px;
  top: 40px;
}

.z {
  margin-right: 100px;
}

.van-checkbox {
  width: 70px;

}

.p {
  position: absolute;
  top: 50px;
  left: 10px;
}

.el-icon-arrow-left {
  font-size: 35px;
  color: #000;
  margin-top: 10px;
  line-height: 55px;
  float: left;
}

header span {
  text-align: center;
  line-height: 55px;
  font-size: 18px;
}

.ddd {
  width: 67px;
  height: 35px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 30px;
}

.el-icon-more,
.el-icon-remove-outline {
  font-size: 20px;
  color: #000;
  line-height: 30px;
  margin: 3px;
  margin-left: 10px;
}

.box {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  background-color: #fff;
}

.box1 {
  position: relative;
}

.box1 span {
  position: absolute;
  right: 10px;
  font-size: 16px;
  color: #6b6666;
  margin-top: 8px;
}

.yuan {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #ccc;
  position: absolute;
  left: 20px;
  top: 50px;
}

.box2 {
  width: 100%;
  height: 120px;
  position: relative;
  background-color: #f9f7f7de;

  margin-top: 30px;
}

.tp {
  width: 90px;
  height: 90px;
  position: relative;
}

.tp img {
  width: 90px;
  height: 90px;
  position: absolute;
  top: 15px;
  left: 46px;
}

main {
  flex: 1;
  height: 100%;

  /* background-color: #ccc; */
}

.tp2 {
  width: 250px;
  height: 90px;

  position: absolute;
  right: 10px;
  top: 15px;
}

.q {
  margin-left: 80px;
}

.tp2 p {
  width: 150px;
  margin-left: 30px;
}

.box3 .v {
  width: 30px;
  padding-left: 20px;
  color: red;
  margin-left: 20px;
}
</style>